
import { React, Component } from 'react';
import './ChatInput.css'
import { connect } from 'react-redux';
import { chatAction } from '../../store/action/num'
class ChatInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      textValue: '' // 设置一个空的文本值
    };
  }
  handleChange = (event) => {
    // 在文本框值发生变化时更新状态
    this.setState({ textValue: event.target.value });
  }

  sendMsg = () => {
    this.setState({ textValue: '' });
    let msg = {
      code: "1",
      type: "text",
      receiverId: "twlchat",
      senderId: localStorage.getItem("WsUid"),
      message: this.state.textValue,
      date: "2023-03-25 03:16:09"
    };
    window.socket.sendMessage(msg);

    let record = this.props.counter.chat.record;
    record.push(msg)
    //处理接收消息
    this.props.dispatch(chatAction(), { record });
    
  }
  
  render () {
    return (
      <div  >
        <div className='chat-input'>
          <div className='chat-input-left'>
            <div>+_-</div>
          </div>
          <div className='chat-input-content'>
            <div className='chat-input-txt'><textarea className='textarea' value={this.state.textValue} onChange={this.handleChange}></textarea> </div>
          </div>
          <div className='chat-input-right'>
            <div className='chat-input-send' onClick={this.sendMsg}>发送</div>
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  counter: state
});

export default connect(mapStateToProps)(ChatInput)